import React, {
  Component
} from 'react'

class CommentList extends Component {
  constructor() {
    super();
    this.state = {
      comments: []
    }
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        comments: [
          { body: '123213123123', author: 'facebook' },
          { body: '123213范德萨范德萨分手的123123', author: 'face1111book' },
        ]
      })
    }, 1000)
  }
  render() {
    return (
      <div >
        {this.state.comments.map((item, index) => (
          <Comment key={index} {...item} />
        ))}
      </div>
    )
  }
}

export default CommentList;


//展示组件
//memo高阶组件
const Comment = React.memo(function (props) {
  console.log('render');
  return (
    <div>
      <p>{props.body}</p>
      <p>---{props.author}</p>
    </div>
  )
})

// class Comment extends React.PureComponent {
//   constructor() {
//     super()
//   }
//   // shouldComponentUpdate(nextProps) {
//   //   if (nextProps.body === this.props.body && nextProps.author === this.props.author) {
//   //     return false
//   //   }
//   //   return false
//   // }
//   render() {
//     console.log(111)
//     return (
//       <div>
//         <p>{this.props.body}</p>
//         <p>---{this.props.author}</p>
//       </div>
//     )
//   }
// }
